let path = require('path')
let htmlwebpackplugin = require('html-webpack-plugin')
let copywebpackplugin = require('copy-webpack-plugin')
module.exports = {
    entry: './src/main.js',
    output: {
        path: __dirname + "/build", //打包后的文件存放的路径
        filename: "main-bundle.js", //打包后输出的文件名
        environment: {
            arrowFunction: false
        }
    },
    mode: 'production',
    devServer: {
        static: path.resolve('./public'),
        port: 9090,
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                // pathRewrite: {
                //     '^/api': '',
                // }
            }
        }
    },
    plugins: [
        // new copywebpackplugin({
        //     patterns: [
        //         //指定拷贝的文件
        //         // 把public下面的 imgs 文件夹中的文件拷贝到输出目录中imgs文件夹中
        //         {
        //             from: './public/images',
        //             to: './images'
        //         },
        //         {
        //             from: './public/data',
        //             to: './data'
        //         },
        //     ]
        // })
    ],

    module: {
        // 把es6+ 的语法编译为es5的语法
        // test 表示编译的文件  /\.js$/ 表示js文件
        // use 编译代码时候 使用到的模块
        // loader: 编译这个代码需要使用的模块
        // option 这个模块的使用规则
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    // 根据配置的支持浏览器去处理代码
                    presets: ['@babel/preset-env']
                }
            }
        }, {
            test: /\.css$/,
            // 当需要使用多个，模块 模块的先后顺序很重要
            // 模块执行是从后往前执行
            // 会执行css-loader 然后再执行style-loader
            // css-loader 编译css代码
            // style-loader 提取css写html结构中
            use: ['style-loader', 'css-loader']
        }, {
            // 用于把sass代码编译为css代码 浏览器不识别sass文件 只会识别css文件
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            // 处理图片
            test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    // 如果图片的base64 大于10k 表示使用图片的地址
                    // 如果图片的base64 小于10k 则使用 base64
                    limit: 8000, //10k
                    // name图片原来的名字
                    // 把图片写入 img文件夹下面
                    name: 'img/[name]-[hash:5].[ext]'
                }
            }
        }]
    }
}